<template>
  <div class="app-container">
    <van-nav-bar :title="title" left-arrow @click-left="$router.back()" />
    <div class="content-box">
      <div class="list-box">
        <div class="list-content" v-if="itemList.length">
          <div class="total-tip">{{ `共 ${total} 条记录` }}</div>
          <div class="list-item" v-for="(item, index) in itemList" :key="index" @click="toDetail(item)">
            <div class="item-cover">
              <img class="cover-img" :src="require(`@/assets/images/mindStation/${'MindProbesCover.png'}`)">
            </div>
            <div class="item-label-box">
              <div class="item-label">{{ item.scaleName }}</div>
              <!-- <div class="item-tip">结果：{{ item.result }}</div> -->
              <div class="item-tip">测评时间：{{ item.createTime }}</div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/mindStation/index.js';

export default {
  name: 'examTestRecord',
  data() {
    return {
      title: '',
      itemList: [],
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      api.recordsList({}).then((res) => {
        this.itemList = res.rows;
        this.total = res.total;
      });
    },
    toDetail(item) {
      this.$router.push({
        name: 'ExamTest',
        query: { scaleItem: JSON.stringify({ scaleName: item.scaleName, scaleId: item.scaleId }), pageIndex: 'result' },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

@include list-box-style;
.list-box {
  height: 100%;
}
</style>
